<template>
  <el-dialog
    class="dia-style"
    title="编辑"
    :visible.sync="open"
    :modal-append-to-body="false"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="106px"
      label-position="left"
      style="padding-left: 54px; padding-top: 53px"
    >
      <!-- 工单/事项名称 -->
      <el-form-item label="名称:" :label-width="formLabelWidth">
        <el-input
          v-model="form.name"
          size="small"
          style="width: 370px"
          placeholder="请输入接入系统名称"
        ></el-input>
      </el-form-item>
      <!-- 流程 -->
      <!-- label-width="320px"表头的宽度 -->
      <el-form-item label="API接口地址:" :label-width="formLabelWidth">
        <el-input
          v-model="form.region"
          size="small"
          style="width: 370px"
          placeholder="请输入接口"
        ></el-input>
      </el-form-item>
      <!-- 工单/事项名称 -->
      <el-form-item label="文件下载地址:" :label-width="formLabelWidth">
        <el-input
          v-model="form.region"
          size="small"
          style="width: 370px"
          placeholder="请输入接口"
        ></el-input>
      </el-form-item>
      <!-- 情报员图标 -->
      <el-form-item label="情报员图标:" :label-width="formLabelWidth">
        <div
          style="
            width: 104px;
            height: 104px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(217, 217, 217, 1);
            border-radius: 2px;
          "
        >
          <img style="width: 100%;
            height: 100%;" src="@/assets/images/jrsjy_logo06@1x.png" alt="" />
        </div>
        <div class="el-upload__tip" slot="tip">
          只能上传60*60像素的jpg/png文件,且只能上传一张,且不超过500kb
        </div>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">完 成</el-button>
    </div>
  </el-dialog>
</template>
<script>
// import { addDictClassify, updateDictClassify } from '@/api/milkyway/dictManager'
export default {
  props: {
    title: {
      type: String,
      default() {
        return "下发风险预警";
      },
    },
  },
  data() {
    return {
       dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
      form: {
        name: "国家互联网应急中心(CNCERT)",
        region: "https://www.cret.org.cn",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      // 默认图片
      defaultFileList: [
        {
          name: "default.png",
          url: "./jrsjy_logo06@1x.png",
        },
      ],
      // 是否显示弹出层
      open: false,
      // 标题宽度
      labelWidth: "100",
      // 是否显示按钮
      btnHidden: true,
      // 表单项配置
      formLabelWidth: "120px",
      // 表单校验
      rules: {
        name: [{ required: true, message: "请输入要素名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入要素来源", trigger: "blur" }],
        sort: [{ required: true, message: "", trigger: "blur" }],
      },
    };
  },
  computed: {
    formData: {
      get() {
        return this.form;
      },
      set(val) {},
    },
  },
  watch: {},
  created() {},
  methods: {
    show() {
      this.open = true;
      this.reset();
    },
    /** 提交按钮 */
    async submitForm() {
      this.open = false;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        id: undefined,
        code: undefined,
        createDate: undefined,
        flag: undefined,
        isDeleted: undefined,
        modifiedDate: undefined,
        name: undefined,
        sort: undefined,
      };
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .dia-style .el-dialog .el-dialog__body {
  padding: 55px;
}
::v-deep .dia-style .el-dialog .el-dialog__body {
  padding: 55px !important;
}

::v-deep .el-icon-date:before {
  // content: "";
  margin-left: 339px;
}
::v-deep .el-input--prefix .el-input__inner {
  padding-left: 15px;
}
::v-deep .el-textarea__inner {
  resize: none;
}
::v-deep {
  
  .el-dialog__body {
    height: auto !important;
  }
  .el-dialog__footer {
    position: absolute;
    bottom: 0;
  }
}
::v-deep .el-textarea__inner {
  width: 635px;
  height: 150px;
}
</style>
